<template>
  <div class="app-container">
    <div class="top">
      <div class="left">
        <el-card class="box-card">
          <EchartsPie1
            id="StackedPie1"
            width="100%"
            height="220px"
            :seriesData="transformedDataLis1"
          />
        </el-card>
        <el-card class="box-card">
          <EchartsPie2
            id="StackedPie2"
            width="100%"
            height="220px"
            :seriesData="transformedDataList2"
          />
        </el-card>
        <div class="div_1">
          <el-card class="box-card_1">
            <div class="el-card__body" style>
              <div class="count-body">
                <div class="count-icon green">
                  <i class="el-icon">
                    <svg
                      viewBox="0 0 1092 1024"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1037.653333 341.333333H109.226667v562.653867c0 3.413333 2.730667 6.212267 6.007466 6.212267H600.746667c30.173867 0 54.613333 25.463467 54.613333 56.9344 0 31.402667-24.439467 56.866133-54.613333 56.866133H115.234133C51.6096 1024 0 970.274133 0 903.9872V120.0128C0 53.794133 51.6096 0 115.234133 0h861.7984C1040.657067 0 1092.266667 53.725867 1092.266667 120.0128v164.4544c0 31.402667-24.439467 56.866133-54.613334 56.866133zM614.4 750.933333a68.266667 68.266667 0 1 1 0-136.533333 68.266667 68.266667 0 0 1 0 136.533333z m204.8 0a68.266667 68.266667 0 1 1 0-136.533333 68.266667 68.266667 0 0 1 0 136.533333z m204.8 0a68.266667 68.266667 0 1 1 0-136.533333 68.266667 68.266667 0 0 1 0 136.533333z m-40.96-523.400533V120.0128a6.144 6.144 0 0 0-6.007467-6.212267H115.234133a5.870933 5.870933 0 0 0-4.232533 1.8432 6.417067 6.417067 0 0 0-1.774933 4.369067v107.52h873.813333z"
                        fill="#40c9c6"
                        p-id="3562"
                      />
                    </svg>
                  </i>
                </div>
                <div>
                  <div class="count-text">执行中</div>
                  <div class="countup-wrap count-num green">
                    <span>{{ progressIn }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="box-card_1">
            <div class="el-card__body" style>
              <div class="count-body">
                <div class="count-icon green">
                  <i class="el-icon">
                    <svg
                      viewBox="0 0 1024 1024"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M512 480.512l-388.736-161.92c-26.24-10.944-26.24-49.792 0-60.736L512 96l388.672 161.92c26.24 10.944 26.24 49.792 0 60.736L512 480.512z m0-314.24l292.608 121.984L512 410.176 219.328 288.256 512 166.336zM95.936 528.32L512 711.168l415.936-182.848V449.792L512 632.64 95.936 449.728v78.528z m0 217.152L512 928.32l415.936-182.848V666.88L512 849.792 96 666.816v78.592z"
                        fill="#1296db"
                        fill-opacity="0.9"
                        p-id="4584"
                      />
                    </svg>
                  </i>
                </div>
                <div>
                  <div class="count-text">任务队列</div>
                  <div class="countup-wrap count-num color">
                    <span>0</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-card class="echarts-line">
        <EchartsMove
          id="StackedMove"
          width="100%"
          height="320px"
          :seriesData="cate3"
        />
      </el-card>
      <el-card class="echarts-line">
        <EchartsPrcedrue
          id="StackedLine"
          width="100%"
          height="320px"
          :seriesData="cate1"
        />
      </el-card>
      <el-card class="echarts-line">
        <EchartsTest
          id="StackedTest"
          width="100%"
          height="320px"
          :seriesData="cate2"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import EchartsPie1 from "@/components/Echarts/pie1.vue";
import EchartsPie2 from "@/components/Echarts/pie2.vue";
import EchartsPrcedrue from "@/components/Echarts/catePrcedrue.vue";
import EchartsTest from "@/components/Echarts/cateTest.vue";
import EchartsMove from "@/components/Echarts/cateMove.vue";
import { dataSourceCount, dataSourceCate } from "@/api/system/user";
// import {
//   listTaskProgressconf
// } from "@/api/console/dataTaskconf";
export default {
  name: "Index",
  components: { EchartsPrcedrue, EchartsPie1, EchartsPie2, EchartsTest, EchartsMove },
  data() {
    return {
      transformedDataLis1: [],
      transformedDataList2: [],
      cate1: [],
      cate2: [],
      cate3: [],
      progressIn: "",
    };
  },
  async mounted() {
    let res = await dataSourceCount();
    let cate = await dataSourceCate();
    const dictItem = await this.getDicts("all_tasktype");
    dictItem.data.forEach((item) => {
      if (cate.data.dataJobTypeCount[item.dictValue]) {
        cate.data.dataJobTypeCount[item.dictValue].dictLabel = item.dictLabel;
      }
      if (cate.data.appraiseJobTypeCount[item.dictValue]) {
        cate.data.appraiseJobTypeCount[item.dictValue].dictLabel =
          item.dictLabel;
      }
      if (cate.data.dataCheckJobTypeCount[item.dictValue]) {
        cate.data.dataCheckJobTypeCount[item.dictValue].dictLabel =
          item.dictLabel;
      }
    });
    // const [numArray, jobTypeArray] = this.extractData(cate.data.appraiseJobTypeCount);
    this.cate1 = this.extractData(cate.data.appraiseJobTypeCount);
    this.cate2 = this.extractData(cate.data.dataCheckJobTypeCount);
    this.cate3 = this.extractData(cate.data.dataJobTypeCount);

    // 调用转换函数
    this.transformedDataLis1 = this.transformData(res.dataTypeCount);
    this.transformedDataList2 = this.transformData(res.dataCount);
    // try {
    //   let progressIn = await listTaskProgressconf();
    //   this.progressIn = progressIn.data.length;
    // } catch (error) {
    //   console.error("接口调用出现错误：", error);
    //   // 可以在这里进行错误处理，比如显示错误提示信息给用户
    // }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    transformData(data) {
      let result = [];
      // 遍历原始数据
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          // 注意：这里假设 DAMANG 是 DAMENG 的打字错误
          // let name = key === "DAMENG" ? "DAMENG" : key; // 如果没有错误，可以简化为 let name = key;
          let name = key;
          result.push({
            value: data[key].num,
            name: name,
          });
        }
      }
      // 如果需要特定顺序或过滤某些项，可以在这里添加逻辑
      // 例如，如果我们只想要 MYSQL 和 DAMENG
      // result = result.filter(item => item.name === 'MYSQL' || item.name === 'DAMENG');
      return result;
    },
    extractData(data) {
      let nums = [];
      let jobTypes = [];

      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          nums.push(data[key].num);
          jobTypes.push(data[key].dictLabel);
        }
      }

      return [nums, jobTypes];
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
}
.left {
  display: flex;
}
.box-card {
  width: 30%;
  margin-top: 10px;
  margin-left: 10px;
}
.div_1 {
  width: 30%;
  .box-card_1 {
    margin-left: 10px;
    margin-top: 13px;
    .el-card__body {
      padding: 20px;
      .count-body {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .count-icon {
          font-size: 48px;
          font-weight: bold;
          .el-icon {
            height: 1em;
            width: 1em;
            line-height: 1em;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            fill: currentColor;
            color: #40c9c6;
            font-size: inherit;
          }
        }
        .count-text {
          margin-bottom: 12px;
          color: rgba(0, 0, 0, 0.45);
          font-weight: bold;
          font-size: 15px;
        }
        .count-num.green,
        .count-icon.green {
          color: #40c9c6;
        }
        .count-num.color {
          color: #1296db;
          margin-left: 10px;
        }

        .count-num {
          font-weight: bold;
          font-size: 18px;
        }
      }
    }
  }
}

.echarts-line {
  width: 90.5%;
  height: 300px;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
